<template>
	<!-- title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToIndex">
			<image class="title_leftbox_image_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middlebox_text">开奖公告</view>

		</view>
		<view class="title_rightbox">
			<image class="title_rightbox_img" src="../../static/zhuanfa.png" @click="showzhezhao"></image>
		</view>
	</view>
	<!-- tab部分 -->
	<!-- <view class="tabbox">
		<view class="tabbox_tabtextbox">
			<view class="tabbox_tabtextbox_text">数字彩</view>
			<view class="tabbox_tabtextbox_text">竞技彩</view>
		</view>
	</view> -->

	<!-- tab部分 -->
	<view class="tabbox">
		<view class="tabbox_tabtextbox" v-for="(tab, index) in tabs" :key="index"
			:class="{ 'active': subCurrent === index }" @click="subChecked(index)">
			{{ tab }}
		</view>
	</view>
	<!-- 内容部分 -->
	<view class="nrbox" v-if="subCurrent === 0">
		<!-- 内容可复制部分 -->
		<view class="nrbox_nrtextimgbox">
			<view class="nrbox_nrtextimgnrbox_box">
				<view class="nrbox_nrtextimgnrbox_toptextbox">
					<view class="nrbox_nrtextimgnrbox_toptextbox_text1">大乐透</view>
					<view class="nrbox_nrtextimgnrbox_toptextbox_text2"> 24113期 2024-09-28 周六</view>
				</view>
				<view class="nrbox_nrtextimgnrbox_buttomtextbox">
					<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox">
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">16</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">18</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">25</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">26</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">33</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text2">33</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text2">33</view>
					</view>
					<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox2">
						<image class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_img"
							src="../../static/xiangyoujiantou.png">
						</image>
					</view>
				</view>
			</view>
		</view>


		<view class="nrbox_nrtextimgbox">
			<view class="nrbox_nrtextimgnrbox_box">
				<view class="nrbox_nrtextimgnrbox_toptextbox">
					<view class="nrbox_nrtextimgnrbox_toptextbox_text1">排列三</view>
					<view class="nrbox_nrtextimgnrbox_toptextbox_text2"> 24113期 2024-09-28 周六</view>
				</view>
				<view class="nrbox_nrtextimgnrbox_buttomtextbox">
					<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox">
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">16</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">18</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">25</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">26</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">33</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text2">33</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text2">33</view>
					</view>
					<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox2">
						<image class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_img"
							src="../../static/xiangyoujiantou.png">
						</image>
					</view>
				</view>
			</view>
		</view>


		<view class="nrbox_nrtextimgbox">
			<view class="nrbox_nrtextimgnrbox_box">
				<view class="nrbox_nrtextimgnrbox_toptextbox">
					<view class="nrbox_nrtextimgnrbox_toptextbox_text1">排列五</view>
					<view class="nrbox_nrtextimgnrbox_toptextbox_text2"> 24113期 2024-09-28 周六</view>
				</view>
				<view class="nrbox_nrtextimgnrbox_buttomtextbox">
					<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox">
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">16</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">18</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">25</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">26</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1">33</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text2">33</view>
						<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text2">33</view>
					</view>
					<view class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox2">
						<image class="nrbox_nrtextimgnrbox_buttomtextbox_imgbox_img"
							src="../../static/xiangyoujiantou.png">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view v-if="subCurrent === 1" class="content">
		<view class="page">竞技彩</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				subCurrent: 0, // 默认选中第一个子tab
				tabs: ['数字彩', '竞技彩', ],
			}
		},
		methods: {
			// 跳转到首页的方法
			goToIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				// uni.switchTab({
				// 	url: '/pages/index/index',
				// 	 // 首页路径
				// });
				// 返回上一个页面
				uni.navigateBack({
				  delta: 1 
				});
			},
			subChecked(index) {
				this.subCurrent = index;
			},
		}
	}
</script>

<style>
	page {
		background: #eee;
	}

	/* 以下是title部分样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2%;
	}

	.title_leftbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_leftbox_image_fanhui {
		width: 24px;
		height: 24px;
	}

	.title_middlebox {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_middlebox_text {
		font-size: 18px;
		color: white;
	}


	.title_rightbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_rightbox_img {
		width: 18px;
		height: 18px;
	}

	/* tab部分 */
	.tabbox {
		padding: 2%;
		background: white;
		margin-bottom: 2px;
		display: flex;
	}

	.tabbox_tabtextbox {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.tabbox_tabtextbox_text {
		font-size: 15px;
		flex: 1;
		text-align: center;
	}


	/* tab被选样式 */
	.active {
		position: relative;
		color: #E23234;
		font-weight: bold;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 23px;
		height: 3px;
		background-color: #E23234;
		left: 0;
		right: 0;
		margin: 0px auto;
		top: 24px;
		border-radius: 5px;
	}

	/* 内容部分样式 */
	.nrbox {
		background: #eee;
	}

	.nrbox_nrtextimgbox {
		margin-bottom: 3%;
		background: white;
		/* padding-bottom: 7%; */
		padding: 2% 2% 4% 2%;
	}

	.nrnrbox_nrtextimgbox {
		margin-bottom: 10px;
	}

	.nrbox_nrtextimgnrbox_toptextbox {
		display: flex;
		margin-bottom: 15px;
	}

	.nrbox_nrtextimgnrbox_toptextbox_text1 {
		font-size: 15px;
		margin-right: 5px;
	}

	.nrbox_nrtextimgnrbox_toptextbox_text2 {
		color: #989898;
		font-size: 13px;
		display: flex;
		align-items: center;
	}

	.nrbox_nrtextimgnrbox_buttomtextbox {
		display: flex;
	}

	.nrbox_nrtextimgnrbox_buttomtextbox_imgbox {
		display: flex;
		align-items: center;
		padding: 0 2%;
		margin-right: 5%;
	}

	.nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text1 {
		width: 33px;
		height: 33px;
		border: 50px;
		background: url(../../static/lanseqiu.png) no-repeat 50%;
		background-size: 100% 100% !important;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 5px;
	}

	.nrbox_nrtextimgnrbox_buttomtextbox_imgbox_text2 {
		width: 33px;
		height: 33px;
		border: 50px;
		background: url(../../static/hongseqiu.png) no-repeat 50%;
		background-size: 100% 100% !important;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 5px;
	}

	.nrbox_nrtextimgnrbox_buttomtextbox_imgbox2 {
		display: flex;
		align-items: center;
	}

	.nrbox_nrtextimgnrbox_buttomtextbox_imgbox_img {
		width: 15px;
		height: 15px;
	}
</style>
